<template>
  <view>
    <u-popup class="stylePopup" v-model="showPopupDialog" @close="handleClose" mode="center" border-radius="30"
      :mask-close-able="canClose" :custom-style="{ background: 'transparent' }">
      <view class="styleContainer">
        <image class="style-logo" :src="srcCover" mode="aspectFill"></image>
        <view class="style-logo-text">登录一览</view>
        <view class="style-mobile-login-container">
          <button v-if="!isChecked" class="style-mobile-login" @click="loginByPhone">
            手机号一键登录
          </button>
          <button v-else-if="personId" class="style-mobile-login" @click="loginByPhone">
            手机号一键登录
          </button>
          <button v-else-if="isAuthSetting" class="style-mobile-login" open-type="getPhoneNumber" :hair-line="false"
            @getphonenumber="getPhoneNumber">
            手机号一键登录
          </button>
          <button v-else class="style-mobile-login" open-type="getUserInfo" :hair-line="false"
            @getuserinfo="getUserInfo" :loading="getUserInfoLoading">
            手机号一键登录
          </button>
        </view>
        <view class="style-other-login-container">
          <view class="style-other-login" @click="loginByOther">其他方式登录</view>
        </view>
        <view class="style-privacy-container">
          <view class="style-image-select-container">
            <image class="style-select" :src="srcImageSelect" mode="aspectFill" @click="clickChecked"></image>
          </view>
          <view class="style-privacy-description">
            <text class="style-privacy-text-normal">使用本功能需要注册/登录平台账号，请阅读并同意</text>
            <text class="style-pricacy-text-name" style="color: #f75a3e" @click="clickSevice">《服务协议》</text>
            <text>和</text>
            <text class="style-privacy-text-normal" style="color: #f75a3e" @click="clickPrivacy">《隐私政策》</text>
          </view>
        </view>
      </view>
      <view class="style-close-container" v-if="canClose">
        <image class="style-close" :src="srcCloseDialog" @click="closeDialog"></image>
      </view>
    </u-popup>
  </view>
</template>
<script>
import WxLoginMixin from "@/mixins/wxLogin";
import {
  getApplyStatusByPersonId,
  addBuryingPoint,
} from "@/api/modules/career";
import { getCareerAssessmentVersion } from "@/api/modules/activity";
export default {
  mixins: [WxLoginMixin],
  emits: ["loginSuccessBack"],
  props: {
    targetPath: {
      type: String,
      default: "",
    },
    canClose: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      srcCover: this.$imgBaseSelf + "login/logo_yl.webp",
      srcSelect: this.$imgBaseSelf + "login/privacy_select.webp",
      srcUnselect: this.$imgBaseSelf + "login/privacy_unselect.webp",
      srcImageSelect: this.$imgBaseSelf + "login/privacy_unselect.webp",
      srcCloseDialog: this.$imgBaseSelf + "login/close_dialog.webp",
      isChecked: false,
      showPopupDialog: false,
      isAuthSetting: false,
    };
  },
  created() {
    this.$bus.$on("onLoginSuccess", (data) => {
      this.loginSuccessCallback();
    });
    this.checkAuthSetting();
  },
  onLoad(opt) {
    console.log("onload", opt);
  },
  methods: {
    setVisibility(visibility) {
      this.showPopupDialog = visibility;
    },
    checkAuthSetting() {
      uni.getSetting({
        success: (res) => {
          if (res && res.authSetting && res.authSetting["scope.userInfo"])
            this.isAuthSetting = true;
        },
      });
    },
    loginByPhone() {
      if (this.isChecked) {
        console.log("isChecked");
      } else {
        uni.showToast({
          icon: "none",
          title: "请先阅读并同意协议",
        });
        console.log("is not Checked");
      }
    },
    loginByOther() {
      if (this.isChecked) {
        let fullPath =
          getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
        let returnUrl = encodeURIComponent(fullPath);
        // 如果传了目标路径，在注册或者登录完成后就去到目标路径，而不是单纯的返回
        if (this.targetPath) {
          uni.navigateTo({
            url: `/pagesSub/public/login/index?targetPath=${this.targetPath}`,
          });
        } else {
          uni.navigateTo({
            url: "/pagesSub/public/login/index?returnUrl=" + returnUrl,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: "请先阅读并同意协议",
        });
      }
    },
    onCheckBoxChanged(detail) {
      console.log(detail);
    },
    clickChecked() {
      this.isChecked = !this.isChecked;
      if (this.isChecked) {
        this.srcImageSelect = this.srcSelect;
      } else {
        this.srcImageSelect = this.srcUnselect;
      }
    },
    clickSevice() {
      uni.navigateTo({
        url: `/pagesSub/public/web/BasewebView?url=${encodeURIComponent(
          "https://m5.yl1001.com/marketing/about/agreement.html"
        )}&title=用户服务协议`,
      });
    },
    clickPrivacy() {
      uni.navigateTo({
        url: `/pagesSub/public/web/BasewebView?url=${encodeURIComponent(
          "https://m5.yl1001.com/marketing/about/security.html"
        )}`,
      });
    },
    closeDialog() {
      this.showPopupDialog = false;
    },
    handleJump(personId) {
      this.loginSuccessCallback();
    },
    getApplyStatusByPersonIdFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
      };
      getApplyStatusByPersonId(params).then((res) => {
        if (res.code == 200 && res.data && res.data == 1) {
          getApp().globalData.userIsConsultant = true;
        } else {
          getApp().globalData.userIsConsultant = false;
        }
      });
    },
    getCareerAssessmentVersionFn() {
      const params = {
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        assessmentType: 0,
      };
      getCareerAssessmentVersion(params).then((res) => {
        if (res.code == 200) {
          uni.setStorageSync("assessmentVersion", res.data);
        }
      });
    },
    loginSuccessCallback() {
      this.getApplyStatusByPersonIdFn();
      this.getCareerAssessmentVersionFn();
      //2025年5月14日，蓓莹要求登录之后请求接口统计日活
      this.addBuryingPointFn(40053, "", "", "", "");
      this.$emit("loginSuccessBack", "success");
      uni.showToast({
        icon: "none",
        title: "登录成功",
      });
      this.showPopupDialog = false;
    },
    handleClose() {
      this.isChecked = false;
      this.srcImageSelect = this.srcUnselect;
      this.$emit("closeDialog", "close");
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: "",
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        cardType: "",
        consultantId: "",
        originType: 10,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
    },
  },
};
</script>
<style lang="scss" scoped>
.stylePopup {
  .styleContainer {
    width: 560rpx;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 64rpx;
    border-radius: 20rpx;

    .style-logo {
      width: 114rpx;
      height: 114rpx;
    }

    .style-logo-text {
      margin-top: 36rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
      line-height: 36rpx;
    }

    .style-mobile-login-container {
      margin-top: 56rpx;
      width: 100%;
      display: flex;

      .style-mobile-login {
        width: 100%;
        background: #f75a3e;
        margin-left: 50rpx;
        margin-right: 50rpx;
        text-align: center;
        font-weight: 500;
        color: #ffffff;
        line-height: 36rpx;
        padding-top: 28rpx;
        padding-bottom: 28rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
      }
    }

    .style-other-login-container {
      margin-top: 30rpx;
      width: 100%;
      display: flex;

      .style-other-login {
        width: 100%;
        background: #ffebe7;
        margin-left: 50rpx;
        margin-right: 50rpx;
        text-align: center;
        font-weight: 500;
        color: #f75a3e;
        line-height: 36rpx;
        padding-top: 28rpx;
        padding-bottom: 28rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
      }
    }

    .style-privacy-container {
      display: flex;
      flex-direction: row;
      margin-top: 46rpx;
      margin-left: 50rpx;
      margin-right: 50rpx;
      margin-bottom: 40rpx;

      .style-image-select-container {
        margin-top: 4rpx;

        .style-select {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .style-privacy-description {
        margin-left: 12rpx;

        .style-privacy-text-normal {
          color: #000000;
          font-size: 24rpx;
          height: 36rpx;
        }

        .style-pricacy-text-name {
          color: #f75a3e;
          font-size: 24rpx;
          height: 36rpx;
        }
      }
    }
  }

  .style-close-container {
    display: flex;
    justify-content: center;
    margin-top: 68rpx;

    .style-close {
      width: 104rpx;
      height: 104rpx;
    }
  }
}
</style>
